ホームページに画像を連続して配置したとき、「画像と画像の間に少しだけ隙間がある」という経験をしたことがある人も多くいるでしょう。こういったトラブルは、HTMLの書き方に問題があります。今回の講座では、画像と画像の間にある隙間をなくす方法を紹介します。意外と知られていない基礎知識ですが、知っておくと大変便利ですので、ぜひ覚えておくようにしてください。
まずは、以下のサンプルを参照してください。このサンプルページは、1枚の写真を4つの画像ファイルに分割し、並べて配置したものです。ただし、このHTMLでは画像と画像の間にわずかな隙間ができてしまいます。ホームページのデザイン上、画像と画像を隙間なく配置したい場合は、HTMLを少しだけ工夫して記述しなければいけません。
<IMG src="image1.jpg">
<IMG src="image2.jpg">
<BR>
<IMG src="image3.jpg">
<IMG src="image4.jpg">
まずは横方向の隙間をなくす方法を紹介しましょう。横方向の隙間をなくすには、IMGタグを改行しないで続けて記述します。これで画像が隙間なく配置されます。「HTMLでは改行が無視される」と考えている人も多くいるでしょう。しかし、厳密には「改行は1つの半角スペース」として処理されます。このため画像と画像の間にわずかな隙間ができてしまうのです。画像を隙間なく配置したい場合は、以下のようにIMGタグを改行しないで記述してください。
<IMG src="image1.jpg"><IMG src="image2.jpg">
<BR>
<IMG src="image3.jpg"><IMG src="image4.jpg">
次は、縦方向の隙間をなくす方法を紹介します。横方向の隙間をなくすには、以下のようにBRタグを改行せずに記述しなければいけません。というのも、BRタグの前に改行があると、改行が半角スペースとして処理されるため、1行目は（画像1）（画像2）（半角スペース）、2行目は（画像3）（画像4）とWebブラウザが認識します。つまり、1行目に文字（半角スペース）が含まれてしまうのです。Webブラウザは、文字と画像が混在している場合、その行の画像をベースラインにあわせて配置します。このため、ベースラインの下にある空間分だけ画像が離れて配置されてしまうのです。文字と画像が混在する行がある場合は、このような点にも十分に注意するようにしてください。
<IMG src="image1.jpg"><IMG src="image2.jpg"><BR>
<IMG src="image3.jpg"><IMG src="image4.jpg">
